<template>
	<view>
		<scroll-view class="scroll-view" scroll-y="true" :style="'height:'+scriptHeight+'px'">
			<view class="first-item">
					<view class="avatar"><image class="avatar-image" :src="avatar"></image></view>
					<view class="nickname" @click="login">{{nickName}}</view>
			</view>
			
			<view class="other-item" v-for="(item,index) in list"  :key="index">
				<view class="title" @click="onclick(item.url)">{{item.name}}</view>
				<view class="icon"><uni-icons :type="item.icon" size="15"></uni-icons></view>
			</view>
			<!-- <view class="other-item" >
				<view class="title" @click="onclickmy">添加到我的小程序</view>
				<view class="icon"><uni-icons type="arrowright" size="15"></uni-icons></view>
			</view> -->
			
			<view class="other-item" >
				<view class="title" @click="onclickfeedback">反馈建议</view>
				<view class="icon"><uni-icons type="arrowright" size="15"></uni-icons></view>
			</view>
			<view class="other-item" >
				<view class="title" @click="onclickabout">关于我们</view>
				<view class="icon"><uni-icons type="arrowright" size="15"></uni-icons></view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import unils from "../../unils/utils.js"
	export default {
		data() {
			return {
				'scriptHeight':400,
				"nickName":"点击登录", 
				"avatar":"../../static/default-boy-avatar.png",
				"list":[
					{
						"name":"我的收藏",
						"icon":"arrowright",
						"url":"1",
					},
					{
						"name":"我的战绩",
						"icon":"arrowright",
						"url":"../../pages/myrecord/myrecord",
					}
				]
			}
		},
		onReady() {
			this.scriptHeight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad() {
			if(!unils.stringIsEmpty(this.openid)){
				this.nickName = uni.getStorageSync('nickName');
				this.avatar = uni.getStorageSync('avatarUrl');
			} 
			
		},
		methods: {
			onclick:function(url){
				console.log(url);
				unils.needLoginJump(url);
			},
			login:function(){
				let that = this;
				var p = unils.authLogin();
				p.then(function(isLogin){
					if(isLogin){
						that.nickName = uni.getStorageSync('nickName');
						that.avatar = uni.getStorageSync('avatarUrl');
						that.openid = uni.getStorageSync('openid');
					
					} else {
						
					}
				})
			},
			onclickfeedback:function(){
				unils.needLoginJump("./feedback");
			},
			onclickabout:function(){
				uni.navigateTo({
					url:"./about"
				})
			}
		}
	}
</script>

<style lang="scss">
.scroll-view{
	height: 450px;
	background-color: $uni-scroll-bg-clolr;
	.first-item{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 20px 10px;
		.avatar{
			.avatar-image{
				width:50px;
				height: 50px;
				border-radius: 25px;
			}
		}
		.nickname{
			font-size: 15px;
			margin-top: 5px;
			color:$uni-text-color;
			display: flex;
			justify-content: center;
		}
	}
	.other-item{
		height:50px;
		margin-bottom:10px;
		border-radius: 5px;
		display: flex;
		background-color: $uni-bg-color;
		align-items: center;
		padding: 0 10px;
		margin: 10px;
		.title{
			font-size: 15px;
			width:100%;
			color:$uni-text-color;
		}
		.icon{
			flex-shrink: 0;
		}
	}
}
</style>
